<script setup>
import { useStore } from "vuex";
import {  fetchFile, updateFile, uploadImage } from "../../Api";
import { error, success } from "../../utils/log";
import { IMG_ADDRESS } from "../../utils/request";

const { onMounted, ref, watch }=require('@vue/runtime-core');
const { initDrag }=require('../../utils');

    const store = useStore();
    const openEditor = () => {
        store.commit("setEditor",true);
    }
    const closeEditor = () => {
        store.commit("setEditor",false);
    }
    onMounted(()=>{
        initDrag('#Editor-icon-container');
        initDrag('#controlBar-container',"#Editor-editor-container");
    })

    watch(()=>store.state.editorFilePath,async (newValue,oldValue)=>{
        // if(oldValue) { //提示是否保存文件
// 
        // }
        try {
            let res = await fetchFile(newValue.split("\\").join("/"));
            text.value = res.data;               
        } catch(e) {
            console.log("文件获取失败:",e);
        }
    })
    const save = async () => {
        if(!store.state.editorFilePath) {//保存在localStorage
            localStorage.setItem("editor-tem-content",text.value);
            success("保存临时代码成功");
            return
        }   
        let data = {};
        data.Path = store.state.editorFilePath;
        data.Content = text.value;
        try {
            let res = await updateFile(data)
            success("保存文件成功");
            console.log(res);
        } catch(e) {
            console.log(e);
            error("保存文件失败");
        }
    }


    const md = ref(null);
    const imgAdd = async (pos,file) => {
        if(!store.state.editorFilePath) {//保存在localStorage
            return
        }   
        let data = new FormData();
        let path = store.state.editorFilePath
        console.log(path);
        path = path.split("\\").slice(1);
        path.push(path.pop().split(".")[0]);
        path = path.join("/");
        data.append("path",path);
        data.append("file",file);
        try {
            let res = await uploadImage(data);
        } catch(e) {
            console.log("图片上传失败:",e);
        }
        path = IMG_ADDRESS + path + `/${file.name}`;
        md.value.$img2Url(pos, path);
    }
    const imgDel = (pos,file) => {
    }

    const text = ref("");
    if(!store.state.editorFilePath) {
        // 从localStorage中获取
        text.value = localStorage.getItem("editor-tem-content");
    }
</script>
 
<template>
    <div class="container">
        <div id="Editor-icon-container">
            <div class="icon-container" v-show="!store.state.editorOpen" @click="openEditor">
                Editor
            </div>
        </div>
        <div id="Editor-editor-container" class="editor-container" v-show="store.state.editorOpen">
            <div id="controlBar-container" class="controlBar-container">
                <div class="closer" @click="closeEditor">×</div>
            </div>
            <div class="mavon-editor-container">
                <mavon-editor 
                    ref="md"
                    v-model="text"
                    @save="save"
                    @imgAdd="imgAdd"
                    @imgDel="imgDel"
                />
            </div>
        </div>
    </div>

</template>

<style lang='less' scoped>
    .container {
         .icon-container {
            color: white;
        }
        .editor-container {
            position: absolute;
            top: -700px;
            left: 450px;
            z-index: 888;
            .controlBar-container {
                background: white;
                height: 40px;
                .closer {
                    user-select: none;
                    font-size: 22px;
                    height: 40px;
                    line-height: 40px;
                    float: right;
                    padding: 0 20px;
                    transition: background ease .4s;
                    &:hover {
                        background: #e9e9eb;
                    }
                }
            }
            /deep/.mavon-editor-container {
                .v-note-wrapper {
                    min-height: 400px;
                    min-width: 800px;
                    max-height: 600px;
                    // max-width: 800px;
                }
            }
        }
    }
</style>